@charset "utf-8";

/* ===============================================
Date : 2013-10-01 ~ 2014-11-30
Description : 레이아웃 스타일 정의
=============================================== */

/* 기본레이아웃 */

/* layout */
#wrap{}
#container {width:1000px;margin:10px auto 0 auto;*zoom:1;position:relative}
#container:after {content:" ";display:block;clear:both;}
#footer {height:110px;background:#f5f5f7;border-top:1px solid #c8c8c8;margin:10px 0 0 0}

/* skipNav */
#skipNav{position:absolute;top:0;width:100%;z-index:1090;}
#skipNav a{position:absolute;top:-500px;}
#skipNav a span{display:inline-block;font-weight:bold;font-size:14px;line-height:40px;color:#fff;}
#skipNav a:focus, #skipNav a:active, #skipNav a:hover{display:block;top:0;width:100%;height:40px;background:#0087e5;text-decoration:none;text-align:center;}
#skipNav a:focus, #skipNav a:active, #skipNav a:hover{z-index:1091;}

/* topNav */
#topNav {height:30px;background:#8a9398;position:relative;z-index:1080}
#topNav .tnb {width:1000px;margin:0 auto;}
#topNav .tnb > ul {float:right}
#topNav .tnb > ul > li {float:left;margin:0 10px}
#topNav .tnb > ul > li > a {color:#fff;font-size:11px;padding:8px 0}
#topNav .tnb ul li.js-more-wrap {position:relative;}
#topNav .tnb ul li .js-more-link {display:none;background:#fff;position:absolute; right:0;top:25px;width:60px;border:1px solid gray;padding:5px}
#topNav .tnb ul li .js-more-link a {display:block}

/* siteNav */
#siteNav {width:1000px;margin:0 auto;height:90px;background:#fff;position:relative;z-index:1070}
#siteNav .logo {float:left;margin:20px 0 0 0}
#siteNav .nav-area {float:right;margin:35px 0 0 0}
#siteNav .nav-site {float:left;}
#siteNav .nav-site > li {float:left;margin:0 10px;}
#siteNav .nav-site > li a {font-size:14px;font-weight:bold;padding:5px 0}
#siteNav .nav-site > li.js-more-wrap {position:relative;}
#siteNav .nav-site > li .js-more-link {display:none;background:#fff;position:absolute;right:0;top:25px;z-index:1;width:100px;border:1px solid gray;padding:5px;}
#siteNav .nav-site > li .js-more-link a {display:block;font-size:12px;font-weight:normal}
#siteNav .search {float:left;}
#siteNav .search input[type='submit'] {padding:5px 10px}

/* gnbNav */
#gnbNav {width:1000px;margin:0 auto;height:60px;background:#f0f0f0;border:1px solid #c8c8c8;position:relative;z-index:1060}
#gnbNav .gnb {position:relative;padding:0 10px}
#gnbNav .gnb ul.dep1 > li {float:left;}
#gnbNav .gnb ul.dep1 > li > a {padding:20px 10px 0 10px;height:40px;font-size:14px;font-weight:bold}
#gnbNav .gnb ul.dep1 > li.on > a,
#gnbNav .gnb ul.dep1 > li.over > a {font-weight:bold;}
#gnbNav .gnb ul.dep1 li div.dep2 {position:absolute;left:-1px;top:60px;z-index:1000;display:none;width:100%;background:#fcf8bb;border:1px solid #c8c8c8;}
#gnbNav .gnb ul.dep1 li div.dep2-inner {padding:10px;*zoom:1}
#gnbNav .gnb ul.dep1 li div.dep2-inner:after {content:" ";display:block;clear:both}
#gnbNav .gnb ul.dep1 li div.dep2 ul.dep2 {display:table;float:left;width:600px;}
#gnbNav .gnb ul.dep1 li div.dep2 ul.dep2 li {display:inline-table;*float:left;padding:10px 20px;line-height:1.6}
#gnbNav .gnb ul.dep1 li div.dep2 ul.dep2 li dl dt {font-weight:bold}
#gnbNav .gnb ul.dep1 li div.dep2 .img-banner {float:right;}
#gnbNav .gnb ul.dep1 li div.dep2.type2 ul.dep2 {display:table;float:none;width:auto;}
#gnbNav .gnb ul.dep1 li div.dep2.type2 .img-banner {float:left;margin:0 10px 0 0}
#gnbNav .gnb ul.dep1 li div.dep2.type2 .img-banner img {float:left;margin:0 5px 0 0}
#gnbNav .gnb ul.dep1 li div.dep2.type2 .img-banner .prod-info {float:left;width:120px;min-height:150px;background:#eee;padding:10px;}

/* quickNav */
#quickNav {width:1000px;margin:10px auto 0 auto;height:100px;border:1px solid #c8c8c8;position:relative;z-index:1050}
.js-banner {position:relative}
.js-banner .js-ctr {display:inline-block;width:40px; height:30px;line-height:30px;text-align:center;position:absolute; top:50%; margin-top:-15px;color:#999;border:1px solid #999;border-color:#999 #333 #333 #999;background:#eee;z-index:1}
.js-banner .js-ctr.on {background:#66ccff;font-weight:bold;color:#333}
.js-banner .js-ctr.js-prev {float:left; left:10px;}
.js-banner .js-ctr.js-next {float:right; right:10px;}
.js-banner .js-banner-inner {width:500px;height:100px;overflow:hidden;position:relative;margin:0 auto}
.js-banner .js-banner-inner .js-banner-wrap {position:absolute;left:0;top:0;width:2000px}
.js-banner .js-banner-inner .js-banner-wrap ul {margin:0;padding:0;list-style:none;float:left}
.js-banner .js-banner-inner .js-banner-wrap ul li {float:left;width:100px;height:100px;text-align:center}
.js-banner .js-banner-inner .js-banner-wrap ul li a {display:block;width:90px;height:90px;padding:5px;}
.js-banner .js-banner-inner .js-banner-wrap ul li a span {display:block;width:90px;height:90px;line-height:90px;background:#dff1ff;}

/* lnbNav */
#lnbNav {width:160px;min-height:480px;float:left;background:#f0f0f0;border:1px solid #c8c8c8;padding:10px}
#lnbNav h2 {margin:10px 0;font-size:18px;}
#lnbNav .lnb {padding:10px 0;}
#lnbNav .lnb ul.dep1 li a {font-size:11px;padding:5px}
#lnbNav .lnb ul.dep1 > li {border-top:1px solid gray;}
#lnbNav .lnb ul.dep1 > li.on > a {display:block;font-weight:bold;color:#024287;background:#fff;}
#lnbNav .lnb ul.dep1 li div.dep2 {display:none;border-top:1px solid gray}
#lnbNav .lnb ul.dep1 li ul.dep2 {margin:5px 0 5px 20px;}
#lnbNav .lnb ul.dep1 li ul.dep2 > li {border-top:1px solid gray}
#lnbNav .lnb ul.dep1 li ul.dep2 > li:first-child {border-top:none}
#lnbNav .lnb ul.dep1 li.on div.dep2 {display:block;}
#lnbNav .lnb ul.dep1 li.on ul.dep2 > li.on > a {font-weight:bold}
#lnbNav .lnb ul.dep1 li div.dep3 {display:none;border-top:1px solid gray}
#lnbNav .lnb ul.dep1 li ul.dep3 {margin:5px 0 5px 20px;}
#lnbNav .lnb ul.dep1 li.on ul li.on div.dep3 {display:block;}
#lnbNav .lnb ul.dep1 li.on ul li.on ul li.on > a {font-weight:bold;}
#lnbNav .lnb-my-menu {border:1px solid #c8c8c8;background:#ffffcc;height:80px;margin:5px 0;text-align:center}
#lnbNav .lnb-banner div {border:1px solid #c8c8c8;background:#7ad1fa;margin:5px 0;text-align:center}
#lnbNav .lnb-banner div img {width:100%}
#lnbNav .lnb-my-info .my-name {text-align:center;padding:5px 0 10px 0}
#lnbNav .lnb-my-info .btn {border:1px solid gray;border-color:gray #333 #333 gray;background:#fff;height:22px;line-height:22px;text-align:center}
#lnbNav .lnb-my-info .btn.logout {width:77px}
#lnbNav .lnb-my-info .btn.mypage {width:77px;margin:0 0 0 2px}
#lnbNav .lnb-my-info .btn.certify {width:158px;margin:2px 0 0 0}
#lnbNav .lnb-my-info .timeout {text-align:center;padding:0 0 5px 0}
#lnbNav .lnb-my-info .timeout a.btn {padding:0 5px;background:#ccc;margin:0 5px}

/* contentWrap */
#contentWrap {float:right;border:1px solid #c8c8c8;width:810px}
#contentWrapMain {border:1px solid #c8c8c8;}
/* content */
#content {min-height:500px;background:#fff;padding:0 10px}
#content .service-con {padding:20px 0}

/* pathNav */
#pathNav {padding:10px}
#pathNav h2 {font-size:18px;}
#pathNav .path {float:right;}
#pathNav .path li {float:left;margin:0 5px;font-size:11px}

/* directNav */
#directNav {height:150px;margin:10px 0 0 0;background:#e53286;border:1px solid #c8c8c8}
#directNav .dnavWrap {width:1000px;margin:0 auto;}
#directNav ul.dnav {margin:10px 0}
#directNav ul.dnav > li {float:left;margin:0 20px;}
#directNav ul.dnav dl dt {font-weight:bold;height:30px;}



/* footer */
#footer .footer-inner {width:1000px;margin:0 auto;font-size:11px}
#footer .footer-inner .logo {float:left;width:130px;padding:15px 0 0 0}
#footer .footer-inner .link-etc {float:left;padding:15px 0 0 0}
#footer .footer-inner .link-etc li {float:left;margin:0 10px 0 0;font-weight:bold}
#footer .footer-inner .link-wrap {float:right;padding:10px 0 0 0}
#footer .footer-inner .link-network {float:left;margin:0 10px 0 0}
#footer .footer-inner .link-family {float:left;}
#footer .footer-inner .link-wrap .js-more-wrap {position:relative;}
#footer .footer-inner .link-wrap .js-more-nav {padding:5px 0;}
#footer .footer-inner .link-wrap .js-more-link {display:none;width:120px;background:#fff;position:absolute;right:0; bottom:20px;border:1px solid gray;padding:5px;}
#footer .footer-inner .link-wrap .js-more-link a {display:block}
#footer .footer-inner address {margin:25px 0 0 0}



